<template>
  <li class='item'>
    {{ todo.id }} - {{ todo.title }} - {{ todo.completed }}
    <br>
    <button @click="handleModify">修改</button>
    <button @click="handleRemove">删除</button>
  </li>
</template>

<script>
export default {
  name: 'TodoItem',
  data () {
    return {}
  },
  props: {
    todo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleModify () {
      this.$store.commit('toggleTodoItem', { id: this.todo.id })
    },
    handleRemove () {
      this.$store.commit('removeTodoItem', { id: this.todo.id })
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
